<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>管理系统 - 首页</title>
    <link rel="stylesheet" href="assets/css/index_styles.css" />
    <link rel="stylesheet" href="assets/css/container.css" />

    <link rel="stylesheet" href="assets/css/element-ui.css" />
    <script src="assets/js/cdn.js"></script>
    <link rel="stylesheet" href="assets/fontawesome-free-6.7.2-web/css/all.min.css" />
    <script src="assets/js/vue.js"></script>
    <script src="assets/js/element-ui.js"></script>
    <script src="../../assets/js/auth.js"></script>
    <style>
      .center-grid {
        width: 80%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
        margin: 0 auto;
      }

      .center-item {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        text-align: center;
        transition: transform 0.3s, box-shadow 0.3s;
      }

      .center-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }

      .center-icon {
        width: 60px;
        height: 60px;
        background-color: #e3f2fd;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        color: #1e88e5;
        font-size: 24px;
      }

      /* 图标样式 */
      .user-icon:before {
        content: '👤';
      }
      .order-icon:before {
        content: '📋';
      }
      .product-icon:before {
        content: '📦';
      }
      .inventory-icon:before {
        content: '🏭';
      }
      .finance-icon:before {
        content: '💰';
      }
      .data-icon:before {
        content: '📊';
      }
      .system-icon:before {
        content: '⚙️';
      }
      .message-icon:before {
        content: '📨';
      }

      .center-item h3 {
        margin-bottom: 10px;
        color: #333;
      }

      .center-item p {
        color: #666;
        margin-bottom: 15px;
        height: 40px;
      }

      .center-item .btn {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- <div class="header">
            <div class="container header-content">
                <div class="logo">管理系统</div>
                <ul class="top-menu">
                    <li><a href="index.html" class="active">首页</a></li>
                    <li class="dropdown">
                        <a href="#" @click.prevent="toggleDropdown">
                            业务中心 <span class="dropdown-icon">▼</span>
                        </a>
                        <div class="dropdown-menu" v-show="showDropdown">
                            <a v-for="center in businessCenters" :key="center.name"
                               :href="center.path">
                                {{ center.name }}
                            </a>
                        </div>
                    </li>
                    <li><a href="pages/lv/lv.html" class="active">直播</a></li>
                </ul>
              <div class="user-info" v-if="currentUser.name">
                欢迎，{{ currentUser.name }}
                <el-button type="primary" size="mini" @click="exit(0)">登出</el-button>
              </div>
            </div>
        </div> -->
      <!-- <div class="container main-content">
          <div class="content" style="width: 100%">
            <h1 class="page-title">八大中心</h1>
            <div class="center-grid">
              <div class="center-item" v-for="center in centers" :key="center.id">
                <div class="center-icon">
                  <i :class="center.icon"></i>
                </div>
                <h3>{{ center.name }}</h3>
                <p>{{ center.description }}</p>
                <a :href="center.link" class="btn">进入</a>
              </div>
            </div>
          </div>
        </div>
      </div> -->
      <lx-page-container>
        <lx-header slot="header" v-on:toggle="isToggle = !isToggle" :type="0"></lx-header>
        <lx-sidebar slot="sidebar" :is-collapse="isToggle"></lx-sidebar>
        <lx-main-content slot="content">
          <div class="center-grid mt-10">
            <div class="center-item" v-for="center in centers" :key="center.id">
              <div class="center-icon">
                <i :class="center.icon"></i>
              </div>
              <h3>{{ center.name }}</h3>
              <p>{{ center.description }}</p>
              <a :href="center.link" class="btn">进入</a>
            </div>
          </div>
        </lx-main-content>
      </lx-page-container>
    </div>
    <script type="module">
      import LxPageContainer from './pages/components/LxPageContainer/index.js'
      import LxHeader from './pages/components/LxHeader/index.js'
      import LxSidebar from './pages/components/LxSidebar/index.js'
      import LxMainContent from './pages/components/LxMainContent/index.js'

      Vue.component('lx-page-container', LxPageContainer)
      Vue.component('lx-header', LxHeader)
      Vue.component('lx-sidebar', LxSidebar)
      Vue.component('lx-main-content', LxMainContent)

      new Vue({
        el: '#app',
        data: {
          isToggle: false,
          username: '张三',
          showDropdown: false,
          businessCenters: [
            { name: '订单中心', path: 'pages/index.html' },
            { name: '用户中心', path: '#' },
            { name: '产品中心', path: '#' },
            { name: '库存中心', path: '#' },
            { name: '财务中心', path: '#' },
            { name: '数据中心', path: '#' },
            { name: '系统中心', path: '#' },
            { name: '消息中心', path: '#' }
          ],
          centers: [
            {
              id: 1,
              name: '研发中心',
              description: '新品研发转量产，优化研发流程，工艺优化。',
              link: '#',
              icon: 'user-icon'
            },
            {
              id: 3,
              name: '供应中心',
              description: '制定采购计划，供应商稽核，供应链降本。',
              link: '#',
              icon: 'product-icon'
            },
            {
              id: 4,
              name: '制造中心',
              description: '生产计划达成，制造工艺优化，生产成本管控。',
              link: '#',
              icon: 'inventory-icon'
            },
            {
              id: 6,
              name: '品保中心',
              description: '质量体系搭建，过程质量管理，售后质量改善。',
              link: '#',
              icon: 'data-icon'
            },
            {
              id: 8,
              name: '品牌中心',
              description: '提升品牌形象，达成销售任务，建立售后体系，提升满意度。',
              link: '#',
              icon: 'message-icon'
            },
            {
              id: 5,
              name: '财务中心',
              description: '财务账目管理，财务风险分析，牵头公司融资授信。',
              link: '#',
              icon: 'finance-icon'
            },
            {
              id: 7,
              name: '管理中心',
              description: '负责人事、行政、法务、安全、基建，公司合法/合规经营。',
              link: '#',
              icon: 'system-icon'
            },
            {
              id: 2,
              name: '订单中心',
              description: '管理订单信息、订单处理、订单跟踪等',
              link: 'pages/index.html',
              icon: 'order-icon'
            }
          ]
        },
        methods: {
          toggleDropdown() {
            this.showDropdown = !this.showDropdown
          }
        }
      })
    </script>
  </body>
</html>
